import ArkTooltip from "../ark-tooltip/ArkTooltip.vue";
import ArkTipType from "../../common-type/ark-tip-type";

export default {
  title: 'ark-component-v2/ArkTooltip',
  component: ArkTooltip,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue3、element-plus、element-plus-icons、tailwindcss、ArkTipType</span> 使用`
      }
    }
  },
  argTypes: {
    title: {description: '标题'},
    content: {description: '内容'},
    type: {description: '类型'},
    iconClass: {
      description: '图标类名',
      control: 'select',
      options: Object.values(ArkTipType)
    },
    iconColor: {
      description: '图标颜色',
      control: {type: 'color'}
    },
    attributes: {description: '组件v-bind指令参数'},
    events: {description: '组件v-on指令参数'},
    default: {description: 'Tooltip内嵌的HTML元素'},
    reference: {description: '触发Tooltip的HTML元素'}
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ArkTooltip},
    setup() {
      return {args};
    },
    template: '<ArkTooltip v-bind="args"/>',
  }),
  args: {
    title: '标题',
    content: '内容',
    type: ArkTipType.ERROR,
    iconColor: 'red',
  },
};